<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
</head>
<body>
	<table id="tableId" lay-filter="tableFilter"></table>
	
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
	<script src="${pageContext.request.contextPath}/static/jquery-1.11.3.js"></script>
	<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
	<script src="${pageContext.request.contextPath}/static/mylayer.js"></script>
	<script src="${pageContext.request.contextPath}/static/util.js"></script>
	
	<script>
		layui.use('table', function(){
		  // 只加载LayUI的table模块
		  var table = layui.table;
		  
		  //第一个实例
		  table.render({
		    elem: '#tableId'
		    ,height: 312
		    ,url: '${pageContext.request.contextPath}/student/pageList.action' //数据接口
		    ,ceilMinWidth:80 // 全局定义常规单元格的最小宽度，（layui 2.2.1 新增）
		    ,page: true //开启分页
		    ,cols: [[ //表头
		      {field: 'id', title: 'ID', sort: true, fixed: 'left'}
		      ,{field: 'name', title: '用户名'}
		      ,{field: 'age', title: '年龄', sort: true}
		      ,{field: 'gender', title: '性别'} 
		      ,{title:'操作', toolbar: '#barDemo', fixed: 'right'}
		    ]]
		  });
		  
		//监听行工具事件
		  table.on('tool(tableFilter)', function(obj){
		    var data = obj.data;
		    console.log(obj)
		    console.log(obj.data)
		    if(obj.event === 'del'){
		      layer.confirm('真的删除行么', function(index){
		    	  $.ajax({
		    		  url : "${pageContext.request.contextPath}/student/deleteById.action",
		    		  data : {"id" : data.id},
		    		  dataType : "json",
		    		  type : "post",
		    		  success : function(jsonObj) {
		    			  if (jsonObj.code == util.SUCCESS) {
		    				  mylayer.successMsg(jsonObj.msg);
		    				  // 重新加载数据表格
		    				  table.reload("tableId");
		    			  } else {
							  mylayer.errorMsg(jsonObj.msg);		    				  
		    			  }
		    		  }
		    	  });
		          layer.close(index);
		      });
		    } else if(obj.event === 'edit'){
		    	
		    }
		  });
		  
		});
	</script>

</body>
</html>